<template>
    <div class="sign_up">
        <div class="header">
            <img :src="headImg"/>
        </div>
        <div class="tip_list">您是第{{number}}人申请房资深认证的用户</div>
        <van-cell-group>
            <van-field
                v-model="username"
                label="用户名"
                placeholder="请输入用户名"
                required
                clearable
            />
            <van-field
                v-model="phone"
                label="手机号"
                placeholder="请输入手机号"
                 required
            />
             <van-field
                v-model="sms"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
                 required
            >
                <van-button slot="button" size="small" type="primary" @click="send">发送验证码</van-button>
            </van-field>
            <van-field
                v-model="phone"
                label="微信号"
                placeholder="请输入微信号"
                 required
            />
            <div class="flex_start">
                <div class="">认证类型</div>
                <div  class="select" @click="clickOverlay">{{selectValue}}
                  <van-popup v-model="show" position="bottom" :overlay="true">
                    <van-picker show-toolbar title="请选择类型" :columns="columns" @cancel="onCancel" @confirm="onConfirm" @change="onChange" />
                 </van-popup>
                </div>
            </div>
            <div class="flex_start">
                 <div class="">自我介绍</div>
                 <textarea cols="30" v-model="textarea"></textarea>
            </div>
        </van-cell-group>
        <div class="submit">
              <van-button type="primary" size="large" @click="submit">提交</van-button>
        </div>
      
    </div>
    
</template>
<script>
import{
    Cell,
    CellGroup,
    Field,
    Checkbox,
    Button,
    // Toast,
    Picker,
    Popup 
} from 'vant'
export default {
     components:{
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Checkbox.name]: Checkbox,
        [Button.name]: Button,
        [Picker.name]: Picker,
        [Popup.name]: Popup,
    },
    data(){
        return{
            headImg:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558598108732&di=cf9f8c2f7a87c1aed82270c65511347b&imgtype=0&src=http%3A%2F%2Fpic23.nipic.com%2F20120906%2F10845259_124347407313_2.jpg',
            username:'',
            phone:'',
            sms:'',
            show:false,
            columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            selectValue:'',
            selectId:'',
            textarea:'',
            number:111
        }
    },
     methods: {
         clickOverlay() {
             this.show = true
        },
        onChange(picker, value) {
             this.selectValue = value
             this.onCancel();
        },
        onCancel(){
            this.show = false
        },
        onConfirm(){
            this.show = false
        },
        send(){

        },
        submit(){

        }
  }
}
</script>
<style lang="less">
    .sign_up{
        .header{
            img{
                width: 100%;
                height: 120px;
            }
        }
        .tip{
            background-color: #ffffff;
            padding: 10px 10px;
            box-sizing: content-box;
            margin-top: 10px;
            font-size: 12px;
            color: #BCB9B7;
            .tip_title{
                font-size: 13px;
                margin-bottom: 2px;
            }
           
        }
        .tip_list{
            padding: 10px 10px;
            box-sizing: border-box;
            background-color: #fff;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .radio{
            margin-top: 5px;
            margin-bottom: 5px;
             background-color: #ffffff;
            padding: 10px 10px;
            box-sizing: border-box;
        }
         .van-checkbox{
            margin-top: 5px;
            margin-bottom: 5px;
            font-size: 13px;
            color: #BCB9B7;
            padding: 0 10px;
            box-sizing: border-box;
        }
        .van-checkbox__label{
            font-size: 14px;
        }
        .submit{
            margin-top: 20px;
            padding: 10px 10px;
            box-sizing: border-box;
        }
    }
    .flex_start{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #F8F9FA;
        font-size: 14px;
    }
    .select{
        background-color: transparent;
        width: 70%;
        margin-left: 10px;
        padding: 5px 5px;
        box-sizing: border-box;
        border: none;
    }
    textarea{
        margin-left: 30px;
        height: auto;
        overflow: hidden;
        border: none;
    }
</style>
